<template>
	<view class="login-container">
		<uni-forms :modelValue="formData" label-width="60" ref="form" :rules="rules" label-align="center">
			<uni-forms-item label="账号:" name="loginId" required>
				<uni-easyinput prefixIcon="person-filled" placeholderStyle="color:#ccc;font-size:28rpx;" type="text"
				 	v-model="formData.loginId" placeholder="请输入账号" trim="true" :styles="{borderRadius:'20rpx'}">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="密码:" name="loginPwd" required>
				<uni-easyinput prefixIcon="locked-filled" placeholderStyle="color:#ccc; font-size:28rpx;" type="password"
					v-model="formData.loginPwd" placeholder="请输入密码" trim="true" :styles="{borderRadius:'20rpx'}">
				</uni-easyinput />
			</uni-forms-item>
		</uni-forms>
		<!-- 单选框的实现 -->
		<radio-group @change="radioChange" class="value checked" style="font-size: 28rpx;">
			<label class="radio">
				<radio value="0" :checked="formData.role == 0" />个人
			</label>
			<label class="radio">
				<radio value="1" :checked="formData.role == 1" />企业
			</label>
		</radio-group>
		<button class="btn" @click="loginIn" >登录</button>
		<view class="text">
			<text @click="getAccount">注册账号</text>
		</view>
	</view>
</template>

<script>
	import {loginIn} from "../../ajax/api/login.js";
	import {mapMutations} from "vuex";
	export default {
		data() {
			return {
				formData: {
					loginId: "", //账号
					loginPwd: "", //密码
					role: 0, //单选框
				},
				rules: {
					loginId: {
						rules: [{
							required: true,
							errorMessage: '请填写账号名',
						}]
					},
					loginPwd: {
						rules: [{
							required: true,
							errorMessage: '请填写密码',
						}, {
							// 对密码长度进行限制
							minLength: 6,
							maxLength: 18,
							errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
						}]
					},
				},
			}
		},
		methods: {
			...mapMutations(["updateUserInfo"]),
			radioChange(e) {
				this.formData.role = e.detail.value;
			},
			// 注册账号
			getAccount(){
				uni.navigateTo({
					url:"/pages/account/account"
				})
			},
			// 用户登录
			loginIn(){
				this.$refs.form.validate().then(async(res)=>{
					// 获取用户信息
					const userInfo = await loginIn(this.formData);
					// 存储用户信息
					this.updateUserInfo(userInfo);
					if(this.formData.role === 0){
						// 用户
						uni.switchTab({
							url:"/pages/home/home"
						})
					}else{
						// 企业
						uni.navigateTo({
							url:"/pages/welcome/welcome"
						})
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background: url("");
		background-size: 100% 100%;
	}
</style>
<style lang="scss" scoped>
	@import "./css/login.scss";
</style>
